<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="1.css">
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="allcount">
        <span>
            <i class="number">0</i>件</span>
        <span>
            <i class="allprice">0</i>元</span>
    </div>
    <div class="goods">
        <ul id="tab-bar">

        </ul>
    </div>
    <div class="carts" id="tab-content">
    </div>

    <script>
        // 判断库存
        $(function () {

            $.ajax({
                url: '1.json',
                success: function (res) {

                    for (var i = 0, length = res.data.length; i < length; i++) {
                        var html = '';
                        for (var j = 0, length2 = res.data[i].list.length; j < length2; j++) {

                            html += `<li>
                    <span class="size">${res.data[i].list[j].size}</span>
                    <span class="price">
                        <i class="price-value">${res.data[i].list[j].price}</i>元</span>
                    <span class="stock">${res.data[i].list[j].count}</span>
                    <span class="count">
                        <span class="subtrace">-</span>
                        <input type="text" value="0" class="amount-input" name="" maxlength="10" />
                        <span class="add">+</span>
                    </span>

                </li>`;


                        }
                        // console.log(html);


                        $("#tab-bar").append("<li><span class='gcolor'>" + res.data[i].name + "</span><images src='" + res.data[
                            i].src + "'>" + "</li>");

                        $("#tab-content").append("<div class='cart'><ul>" + html + "</div></ul>");



                    }




                    $('.goods li').eq(0).addClass('on');



                }
            })


            function allcount() {
                var number = 0;
                var allprice = 0;
                var tabi=[];

                for (var i = 0, length = $(".carts .cart").length; i < length; i++) {
                    var dannul = 0;
                  
                    for (var j = 0, length1 = $(".carts .cart").eq(i).find('li').length; j < length1; j++) {
                        //输入法可以输入非数字，所以校验
                        if (/[^\d]/.test($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input")
                                .val())) {
                            // if (isNaN()) {
                            $(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val(1)

                        }
                        dannul += Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val());

                        if (dannul > 0) {
                            $("#tab-bar li").eq(i).addClass("check");
                            // tabi.push(i);
                            
                        } else {

                            $("#tab-bar li").eq(i).removeClass("check");
                        }
                    
                        if(Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val())>0){
                            $(".carts .cart").eq(i).find('li').eq(j).addClass("border-c").find(".subtrace").removeClass('amount-down-limit');
                            // $(this).siblings('.amount-down-limit').removeClass('amount-down-limit');
                            
                            
                        }else if(Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val())==0){
                            $(".carts .cart").eq(i).find('li').eq(j).removeClass('border-c').find(".subtrace").addClass('amount-down-limit');
                        }
                      
                        number += Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val());
                        allprice += Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input")
                                .val()) *
                            $(".carts .cart").eq(i).find('li').eq(j).find(".price-value").text();
                    }
                    if (dannul > 0) {
                  
                        for (var j = 0, length1 = $(".carts .cart").eq(i).find('li').length; j < length1; j++) {
                           var  gcolor=$("#tab-bar li").eq(i).find(".gcolor").text();
                         
                             

                           if(Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val())>0){
                            var  gsize=$(".carts .cart").eq(i).find('li').eq(j).find(".size").text();
                            tabi.push({"color":gcolor,"size":gsize,"number":Number($(".carts .cart").eq(i).find('li').eq(j).find(".amount-input").val())});
                           }
                        }
                        }
                    
                }
                console.log(tabi);
                // for(var index in tabi){
                //                 console.log(tabi[index]);
                //             }

                // console.log(number, allprice);
                $(".allcount .number").text(number);
                $(".allcount .allprice").text(allprice);


            }
            allcount()


            $("#tab-bar").on('click', 'li', function () {
                $(this).addClass('on').siblings('li').removeClass('on');
                // console.log(55);

                $('.carts .cart').siblings('.cart').fadeOut(100).eq($(this).index()).delay(200)
                    .fadeIn();
            })

            $("#tab-content").on('click', '.subtrace', function () {
                if ($(this).next("input").val() <= 0) {
                    $(this).addClass('amount-down-limit');

                    return false;
                }
                $(this).next("input").val(parseInt($(this).next("input").val()) - 1);
                allcount();

            })

            $("#tab-content").on('keyup', '.amount-input', function () {
                var c = $(this);
                if (/[^\d]/.test(c.val())) { //替换非数字字符
                    // var amount=c.val().replace(/[^\d]/g,'');
                    var amount = c.val().replace(/[^0-9]/ig, "");
                    $(this).val(Number(amount));
                }
                console.log($(this).val(), $(this).parent().siblings(".stock").text(), $(this).val() >
                    $(this).parent().siblings(".stock").text());

                if ($(this).val() > 0) {
                    $(this).siblings('.amount-down-limit').removeClass('amount-down-limit');

                    return false;
                }

                if ($(this).val().length > 1) {
                    // console.log(parseInt(amount))
                    $(this).val($(this).val().replace(/\b(0+)/gi, ""));
                } else if (!$(this).val()) {
                    $(this).on('blur', function () {
                        if (!$(this).val()) {
                            $(this).val(0);
                        }
                        $(this).off('blur');
                    });

                }

                if (Number($(this).val()) > Number($(this).parent().siblings(".stock").text())) {
                    alert('超过库存上限');
                    $(this).val($(this).parent().siblings(".stock").text())
                    allcount();
                    return false;
                }

                allcount(); //手动输入数值金额随之改变
            });

            $("#tab-content").on('click', '.add', function () {
                if (Number($(this).prev("input").val()) >= Number($(this).parent().siblings(".stock")
                        .text())) {
                    alert('超过库存上限');
                    $(this).prev("input").val($(this).parent().siblings(".stock").text())


                    return false;
                }

                if ($(this).prev("input").val() > 0) {
                    $(this).siblings().removeClass('amount-down-limit');
                }

                $(this).prev("input").val(parseInt($(this).prev("input").val()) + 1);
                allcount();

            })
        })
    </script>

</body>

</html>